<template>
  <h1>一个简单的滑块：</h1>
  <div class="slider-box" ref="sliderBoxRef">
    <div ref="sliderRef" id="slider" @pointerdown="pointerdown" @pointerup="pointerup">滑块</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const sliderRef = ref()
const sliderBoxRef = ref()
let shiftX = 0

const pointerdown = (e: PointerEvent) => {
  /* 
  在指针的移动过程中，指针可能会离开滑动条的 slider 元素，移动到 slider 之上或之下的位置。
  而 slider 应该严格在水平方向上移动，并与指针保持对齐
  */
  shiftX = e.clientX - sliderRef.value.getBoundingClientRect().left
  sliderRef.value.setPointerCapture(e.pointerId) // 用于将特定元素指定为未来指针事件的捕获目标。
  sliderRef.value.addEventListener('pointermove', sliderMove)
}
const pointerup = (e: PointerEvent) => {
  sliderRef.value.removeEventListener('pointermove', sliderMove)
  // 注意：无需调用 thumb.releasePointerCapture，
  // 它会在 pointerup 时被自动调用
  // sliderRef.value.releasePointerCapture(e.pointerId) // 用来将鼠标指针从先前通过 setPointerCapture() 绑定的元素身上释放出来，还给鼠标指针自由。
}
const sliderMove = (e: PointerEvent) => {
  const { width: boxWidth, left: boxLeft } = sliderBoxRef.value.getBoundingClientRect()
  const { width } = sliderRef.value.getBoundingClientRect()
  // 滑块距起点位置
  let newLeft = e.clientX - shiftX - boxLeft // 220(220是容器距离左边视口区的位置)+70(元素宽度的一半，让鼠标处于中心)
  const rightEdge = boxWidth - width // 滑块可滑动的距离
  // 滑块移动距离
  if (newLeft < 0) {
    newLeft = 0
  }
  if (newLeft > rightEdge) {
    newLeft = rightEdge
  }
  sliderRef.value.style.transform = `translate(${newLeft}px)`
}

</script>

<style lang="scss" scoped>
.slider-box {
  background-color: skyblue;
  border-radius: 10px;
}

#slider {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: palevioletred;
  cursor: move;
  user-select: none;
  border-radius: 10px;
}
</style>
